<template>
    <div class="container">
        <div class="row">
            <div class="col-3">
                <div class="card" style="margin-top: 20px">
                    <div class="card-body">
                        <img style="width: 100%" :src="photo" alt="" />
                    </div>
                </div>
            </div>
            <div class="col-9">
                <div class="card" style="margin-top: 20px">
                    <div class="card-header">
                        <span style="font-size: 130%">我的Bot</span>
                        <button type="button" class="btn btn-primary float-end" data-bs-toggle="modal" data-bs-target="#add-bot-btn">
                            创建Bot
                        </button>

                        <!-- Modal -->
                        <div class="modal fade" id="add-bot-btn" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                        <div class="modal-dialog modal-xl">
                            <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLabel">创建Bot</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                                <div class="mb-3">
                                    <label for="add-bot-title" class="form-label">名称</label>
                                    <input v-model="botAdd.title" type="text" class="form-control" id="add-bot-title" placeholder="输入Bot名称">
                                </div>
                                <div class="mb-3">
                                    <label for="add-bot-description" class="form-label">简介</label>
                                    <input v-model="botAdd.description" type="text" class="form-control" id="add-bot-description" placeholder="输入Bot简介">
                                </div>
                                <div class="mb-3">
                                    <label for="add-bot-code" class="form-label">代码</label>
                                    <VAceEditor
                                        id="add-bot-code"
                                        v-model:value="botAdd.content"
                                        @init="editorInit"
                                        lang="c_cpp"
                                        theme="textmate"
                                        style="height: 300px" />
                                </div>
                            </div>
                            <div class="modal-footer">
                                <div style="color: red">{{ botAdd.error_message }}</div>
                                <button type="button" class="btn btn-primary" @click="addBot">创建</button>
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                            </div>
                            </div>
                        </div>
                        </div>
                        
                    </div>
                    <div class="card-body">
                        <table class="table table-striped table-hover">
                            <thead>
                                <tr>
                                    <th>名称</th>
                                    <th>创建时间</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="bot in bots" :key="bot.id">
                                    <td>{{ bot.title }}</td>
                                    <td>{{ bot.createTime }}</td>
                                    <td>
                                        <button type="button" class="btn btn-secondary" style="margin-right: 10px" data-bs-toggle="modal" :data-bs-target="'#update-bot-btn' + bot.id">修改</button>
                                        <button type="button" class="btn btn-danger" @click="remove_bot(bot.id)">删除</button>

                                        <!-- Modal -->
                                        <div class="modal fade" :id="'update-bot-btn' + bot.id" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                        <div class="modal-dialog modal-xl">
                                            <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="exampleModalLabel">创建Bot</h5>
                                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                            </div>
                                            <div class="modal-body">
                                                <div class="mb-3">
                                                    <label for="update-bot-title" class="form-label">名称</label>
                                                    <input v-model="bot.title" type="text" class="form-control" id="update-bot-title" placeholder="输入Bot名称">
                                                </div>
                                                <div class="mb-3">
                                                    <label for="update-bot-description" class="form-label">简介</label>
                                                    <input v-model="bot.description" type="text" class="form-control" id="update-bot-description" placeholder="输入Bot简介">
                                                </div>
                                                <div class="mb-3">
                                                    <label for="add-bot-code" class="form-label">代码</label>
                                                    <select class="float-end" v-model="lang">
                                                        <option v-for="lang in langList" :key="lang">{{ lang }}</option>
                                                    </select>
                                                    <VAceEditor
                                                        id="add-bot-code"
                                                        v-model:value="bot.content"
                                                        @init="editorInit"
                                                        :lang="lang"
                                                        theme="textmate"
                                                        style="height: 300px" />
                                                </div>
                                            </div>
                                            <div class="modal-footer">
                                                <div style="color: red">{{ botAdd.error_message }}</div>
                                                <button type="button" class="btn btn-primary" @click="updateBot(bot)">保存修改</button>
                                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                                            </div>
                                            </div>
                                        </div>
                                        </div>

                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { ref, reactive } from 'vue'
import $ from 'jquery'
import { useStore } from 'vuex'
import { Modal } from 'bootstrap/dist/js/bootstrap'
import { VAceEditor } from 'vue3-ace-editor';
import ace from 'ace-builds';

export default {
    components: {
        VAceEditor
    },

    setup() {
        ace.config.set(
            "basePath", 
            "https://cdn.jsdelivr.net/npm/ace-builds@" + require('ace-builds').version + "/src-noconflict/")

        const langList = ref([
            "javascript",
            "java",
            "c",
            "go",
            "python3",
            "c_cpp",
        ])
        let lang = ref("");
        

        const store = useStore();
        const photo = store.state.user.photo;
        let bots = ref([]);
        const botAdd = reactive({
            title: "",
            content: "",
            description: "",
            error_message: "",
        });

        const refresh_bots = () => {
            $.ajax({
                url: "http://127.0.0.1:3000/user/bot/getList/",
                type: 'get',
                headers: {
                    Authorization: "Bearer " + store.state.user.token,
                },
                success(res) {
                    bots.value = res;
                },
            })
        }

        const addBot = () => {
            botAdd.error_message = "";
            $.ajax({
                url: "http://127.0.0.1:3000/user/bot/add/",
                type: 'post',
                data: {
                    title: botAdd.title,
                    description: botAdd.description,
                    content: botAdd.content,
                },
                headers: {
                    Authorization: "Bearer " + store.state.user.token,
                },
                success(res) {
                    if ( res.error_message === "success" ) {
                        botAdd.title = "";
                        botAdd.description = "";
                        botAdd.content = "";
                        Modal.getInstance("#add-bot-btn").hide();
                        refresh_bots();
                    } else {
                        botAdd.error_message = res.error_message;
                    }
                },
            })
        }

        const updateBot = (bot) => {
            botAdd.error_message = "";
            $.ajax({
                url: "http://127.0.0.1:3000/user/bot/update/",
                type: 'post',
                data: {
                    bot_id: bot.id,
                    title: bot.title,
                    description: bot.description,
                    content: bot.content,
                },
                headers: {
                    Authorization: "Bearer " + store.state.user.token,
                },
                success(res) {
                    if ( res.error_message === "success" ) {
                        Modal.getInstance('#update-bot-btn' + bot.id).hide();
                        refresh_bots();
                    } else {
                        botAdd.error_message = res.error_message;
                    }
                },
            })
        }

        const remove_bot = (id) => {
            if ( confirm("确定要删除吗") ) {
                $.ajax({
                    url: "http://127.0.0.1:3000/user/bot/remove/",
                    type: 'post',
                    data: {
                        bot_id: id,
                    },
                    headers: {
                        Authorization: "Bearer " + store.state.user.token,
                    },
                    success() {
                        refresh_bots();
                    },
                })
            }
        }

        const editorInit = () => {
            console.log(lang.value)
        }

        refresh_bots();

        return {
            photo,
            bots,
            botAdd,
            addBot,
            remove_bot,
            updateBot,
            langList,
            lang,
            editorInit,
        }
  }
}
</script>

<style>

</style>
